<template>
  <div class="index">
    <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" >
    <div class="bannerBox clearfix">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="spotLisCont" src="../../assets/banner/banner1.jpg"></img>
          </div>
          <div class="swiper-slide">
            <img class="spotLisCont" src="../../assets/banner/banner2.jpg"></img>
          </div>
          <div class="swiper-slide">
            <img class="spotLisCont" src="../../assets/banner/banner3.jpg"></img>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="titleBox">
      <h2>热门诗词</h2>
      <h3>最新的各种热门诗词的推荐！</h3>
    </div>
    <ul class="spotItem clearfix">
      <li class="spotLis" v-for="(spotLis, index) in articleList" v-bind:key="spotLis.id" @click="showDetials(spotLis.id)">
        <img class="spotLisCont" :src="poetryImgList[index%4]"></img>
        <span class="spotLisCont spotTitle">「{{spotLis.name}}」</span>
        <!-- <span class="spotLisCont clearfix">
          <span class="slcNum slcNumL">{{spotLis.rating.average}}/10</span>
          <span class="slcNum slcNumR">评价 {{spotLis.rating.stars}}</span>
        </span> -->
      </li>
    </ul>
    </v-scroll>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import Swiper from 'swiper/dist/js/swiper.min.js' // 轮播
import Scroll from '../overallModules/handRefresh' // 引入上拉加载下拉刷新
let poetryImgList = ['../../../static/images/poetryImg/bg1.jpg', '../../../static/images/poetryImg/bg2.jpg', '../../../static/images/poetryImg/bg3.jpg', '../../../static/images/poetryImg/bg4.jpg'] // 诗词列表背景图片

export default {
  name: 'index',
  components: {
    'v-scroll': Scroll
  },
  data () {
    return {
      spinShow: true,
      loadingText: '加载中...',
      current: 1, // 当前页面
      pageSize: 6, // 一次显示多少条
      articleList: [], // 存放数据
      poetryImgList: poetryImgList, // 临时放数据配套图片的数组
      defaultVal: '李白'
    }
  },
  mounted () {
    let _this = this
    let url = '/getList/TangShiSongCi/Search?key=f1a9930edce84fb1a16b3befe2281616&keyWord='+ _this.defaultVal +'&page=1&rows=' + _this.pageSize
    _this.axios.get(url).then(function (response) {
      // console.log(response)
      if (response.data.result.length) { // 存在数据
        _this.articleList = response.data.result // 获取模拟的动态数据
      } else {
        alert('暂无数据更新~')
      }
      _this.spinShow = false
      // console.log(_this.articleList)
    }).catch(function (response) {
      // console.log(response)
      alert('Data request failed!')
    })
    let mySwiper = new Swiper('.swiper-container', {// eslint-disable-line no-unused-vars
      loop: true,
      autoplay: true,
      pagination: {// 分页器
        el: '.swiper-pagination'
      }
    })
  },
  methods: {
    showDetials: function (id) { // 展示诗词详情 id为诗词的标识id
      let _this = this
      _this.$router.push({path: '/poetryDetial', query: {id: id}}) // 引入详情页 传详情参数过去
    },
    onRefresh (done) {
      let _this = this
      _this.loadingText = '加载中……'
      let url = '/getList/TangShiSongCi/Search?key=f1a9930edce84fb1a16b3befe2281616&keyWord=李白&page=1&rows=' + _this.pageSize
      _this.axios.get(url).then(function (response) {
        // console.log(response)
        let arr = response.data.result
        if (arr.length) { // 存在数据
          _this.articleList = arr
          if (arr.length === _this.pageSize) {
            _this.current = 2
          }
          done() // call done
        } else {
          alert('暂无数据更新~')
        }
        _this.spinShow = false
      }).catch(function (response) {
        // console.log(response)
        alert('Data request failed!')
      })
    },
    onInfinite (done) { // 上拉加载
      let _this = this
      if (_this.current <= 1) _this.current = 2
      let url = '/getList/TangShiSongCi/Search?key=f1a9930edce84fb1a16b3befe2281616&keyWord=李白&page=' + _this.current + '&rows=' + _this.pageSize
      _this.axios.get(url).then(function (response) {
        let arr = response.data.result
        if (arr.length) { // 存在数据
          _this.articleList = _this.articleList.concat(arr)
          if (arr.length < _this.pageSize) {
            _this.loadingText = '没有更多数据了~'
            // vm.$el.querySelector('.load-more').style.display = 'none'
            return
          } else {
            _this.current++
          }
          done() // call done
        } else {
          _this.loadingText = '没有更多数据了~'
        }
        _this.spinShow = false
      }).catch(function (response) {
        // console.log(response)
        // alert('Data request failed!')
        _this.loadingText = '没有更多数据了~'
        return false
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '../../../static/css/page/index.scss'
</style>
